<!doctype html>
<html ng-app > 
    <head>
        <meta charset="utf-8">
        <title>Curso Angular 2014 - Ejercicio</title>
        <!-- AngularJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- CSS -->
        <link rel="stylesheet" href="estilo.css">
        <!-- Bootstrap JavaScript -->
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <hr>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div>
                        <label>
                            <input type="radio" name="tipo" 
                                   value="animal" ng-model="tipo"
                                   ng-click="mostrar = false; nombre='';">
                                <span>Animal</span>
                        </label>
                        <label>
                            <input type="radio" name="tipo" 
                                   value="persona" ng-model="tipo"
                                   ng-click="mostrar = false; nombre=''">
                                <span>Persona</span>
                        </label>
                    </div>
                </div>
                <hr>
                <div ng-show="tipo == 'persona'">
                    <div class="form-group">
                        <label for="nombre" class="col-sm-2 control-label">
                            Ingrese su nombre:
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-class="{error: !nombre}" id="nombre" 
                                   placeholder="Ingrese su nombre aqui" ng-model="nombre">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="hobby" class="col-sm-2 control-label">
                            Ingrese su hobby:
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-class="{error: !hobby}" id="hobby" 
                                   placeholder="Ingrese su hobby aqui" ng-model="hobby">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="direccion" class="col-sm-2 control-label">
                            Ingrese su direcion:
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-class="{error: !direccion}" id="direccion" 
                                   placeholder="Ingrese su direccion aqui" ng-model="direccion">
                        </div>
                    </div>
                </div>
                <div ng-show="tipo == 'animal'">
                    <div class="form-group">
                    <label for="nombre" class="col-sm-2 control-label">
                        Ingrese su nombre:
                    </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" ng-class="{error: !nombre}" id="nombre" 
                               placeholder="Ingrese su nombre aqui" ng-model="nombre">
                    </div>
                </div>
                <div class="form-group">
                    <label for="raza" class="col-sm-2 control-label">
                        Ingrese su raza:
                    </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" ng-class="{error: !raza}" id="raza" 
                               placeholder="Ingrese su raza aqui" ng-model="raza">
                    </div>
                </div>
                </div>
                <input ng-show="tipo" class="btn primary" type="submit" value="Adivinar..." ng-click="mostrar = true;">
            </form>
            <hr ng-show="tipo">
            <h1 ng-show="tipo == 'persona' && mostrar">
                Eh! persona... a ver si adivino... te llamas {{ nombre }} te gusta {{ hobby }} y finalmente vivis en {{ direccion }}...
                <h4 ng-show="tipo == 'persona' && mostrar">ahora {{ nombre }}, tenes una moneda?</h4>
            </h1>
            <h1 ng-show="tipo == 'animal' && mostrar">
                Eh! animal... a ver si adivino... respondes al nombre de {{ nombre }} y sos un {{ raza }}... 
                <h4 ng-show="tipo == 'animal' && mostrar">ahora {{ nombre }}, anda a buscar el palo!</h4>
            </h1>
        </div>
    </body>
</html>